<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>事件修饰符</title>
    <style>
      .inner {
        height: 150px;
        background: lightcyan;
      }
    </style>
  </head>

  <body>
    <div id="app">
      <!-- 使用.stop 阻止事件冒泡 -->
      <!-- <div class="inner" @click='divHandle'>
            <input type="button" value="戳他" @click.stop='btnHandle'>
        </div> -->

      <!-- 使用 .prevent 阻止默认事件 -->
      <!-- <a href="http://www.baidu.com" @click.prevent='linkClick'>百度一下</a> -->

      <!-- 使用.capture 捕获事件 -->
      <!-- <div class="inner" @click.capture='divHandle'>
            <input type="button" value="戳他" @click='btnHandle'>
        </div> -->

        <!-- 使用 .self实现只有点击当前元素的时候，才会触发当前事件 -->
      <!-- <div class="inner" @click.self="divHandle">
        <input type="button" value="戳他" @click="btnHandle" />
      </div> -->

      <!-- 使用.once 只触发一次 -->
      <a href="#" @click.once=''></a>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      var vm = new Vue({
        el: "#app", //指定要控制的元素
        data: {},
        methods: {
          divHandle() {
            console.log("触发了div的点击事件");
          },
          btnHandle() {
            console.log("触发了btn的点击事件");
          }
        }
      });
    </script>
  </body>
</html>
